

// import React from "react";

// class DemoA extends React.Component {
//   constructor(props) {
//     super(props)
//     this.state = {
//       flag: true
//     }
//   }

//   render() {
//     let { flag } = this.state;
//     return (
//       <div>
//         <h2>类组件</h2>
//         <hr />
//         <button onClick={() => this.setState(_ => ({ flag: !_.flag }))}>显示/隐藏</button>
//         {
//           flag && <h1>我是一个h1标签</h1>
//         }
//       </div>
//     )
//   }
// }

// export default DemoA


// ------------------------------------------

// import React from "react";

// class DemoA extends React.Component {
//   constructor(props) {
//     super(props)
//     this.state = {
//       flag: true
//     }
//   }

//   render() {
//     let { flag } = this.state;
//     return (
//       <div>
//         <h2>类组件</h2>
//         <hr />
//         <button onClick={() => this.setState(_ => ({ flag: !_.flag }))}>显示/隐藏</button>
//         {
//           flag && (
//             <div>
//               <h1>我是一个h1标签</h1>
//               <h1>我是一个h1标签</h1>
//               <h1>我是一个h1标签</h1>
//               <h1>我是一个h1标签</h1>
//             </div>
//           )
//         }
//       </div>
//     )
//   }
// }

// export default DemoA

// ------------------------------------------

// import React from "react";

// class DemoA extends React.Component {
//   constructor(props) {
//     super(props)
//     this.state = {
//       flag: true
//     }
//   }

//   render() {
//     let { flag } = this.state;
//     return (
//       <div>
//         <h2>类组件</h2>
//         <hr />
//         <button onClick={() => this.setState(_ => ({ flag: !_.flag }))}>切换</button>
//         {
//           flag ? <h1>我是一个h1标签</h1> : <h2>我是一个h2标签</h2>
//         }
//       </div>
//     )
//   }
// }

// export default DemoA

// ------------------------------------------

// import React from "react";

// class DemoA extends React.Component {
//   constructor(props) {
//     super(props)
//     this.state = {
//       num: 0
//     }
//   }
//   // 如果是多条件渲染,通常会封装成一个渲染函数
//   renderHn() {
//     let { num } = this.state;
//     let res = null;
//     if (num === 1) res = <h1>H1</h1>
//     if (num === 2) res = <h2>H2</h2>
//     if (num === 3) res = <h3>H3</h3>
//     if (num === 4) res = <h4>H4</h4>
//     if (num === 5) res = <h5>H5</h5>
//     if (num === 6) res = <h6>H6</h6>
//     return res;
//   }
//   render() {
//     let { num } = this.state;
//     return (
//       <div>
//         <h2>类组件 -- {num}</h2>
//         <hr />
//         <button onClick={() => this.setState(_ => ({ num: (_.num + 1) % 7 }))}>切换</button>
//         {
//           this.renderHn()
//         }
//       </div>
//     )
//   }
// }

// export default DemoA

// ------------------------------------------

// import React from "react";

// class DemoA extends React.Component {
//   constructor(props) {
//     super(props)
//     this.state = {
//       flag: true
//     }
//   }
//   render() {
//     let { flag } = this.state;
//     return (
//       <div>
//         <h2>类组件</h2>
//         <hr />
//         <button onClick={() => this.setState(_ => ({ flag: (!_.flag) }))}>切换</button>
//         <h1 style={{ display: (flag ? 'block' : 'none') }}>我是一个h1标签</h1>
//       </div>
//     )
//   }
// }

// export default DemoA

// ------------------------------------------

// import { useState } from "react"

// function DemoA() {
//   let [num, setNum] = useState(0);
//   let renderHn = () => {
//     let res = null;
//     switch (num) {
//       case 0:
//         res = <h1>我是一个h1标签</h1>
//         break;
//       case 1:
//         res = <h1>我是一个h2标签</h1>
//         break;
//       case 2:
//         res = <h1>我是一个h3标签</h1>
//         break;
//     }
//     return res;
//   }
//   return (
//     <div>
//       <button onClick={() => setNum((num + 1) % 3)}>改变num</button>
//       <hr />
//       {
//         renderHn()
//       }
//     </div>
//   )
// }

// export default DemoA;

// ------------------------------------------

import React from "react";

class DemoA extends React.Component {
  constructor() {
    super()
    this.state = {
      todo: "",
      list: []
    }
  }
  getTodo(e) {
    // console.log(e.target.value);
    this.setState({
      todo: e.target.value
    })
  }
  addByEnter(e) {
    if (e.keyCode === 13) {
      this.confirm();
    }
  }
  confirm() {
    if (!this.state.todo.trim()) {
      alert("todo不能为空~")
      return;
    }
    // console.log(this.state.todo);
    this.setState(state => ({
      list: [...state.list, { id: Date.now(), task: state.todo }]
    }))
    this.setState({
      todo: ""
    })
  }
  delTodo(id) {
    this.setState(state => ({
      list: state.list.filter(item => item.id !== id)
    }))
  }
  render() {
    let { todo, list } = this.state;
    return (
      <div>
        <div>
          {/* 此时输入框中的内容是由todo状态来决定的 */}
          {/* 这样的输入框,叫受控输入框,受状态的状态 */}
          {/* <input type="text" value={todo} onInput={e => this.getTodo(e)} /> */}


          <input
            type="text"
            value={todo}
            onChange={e => this.getTodo(e)}
            onKeyUp={e => this.addByEnter(e)}
          />
          <button onClick={(e) => this.confirm(e)}>添加</button>
        </div>
        <div>
          {
            list.map((item, index, arr) => (
              <div key={item.id}>
                <span>{item.id} -- <span>{item.task}</span></span>
                <button onClick={() => this.delTodo(item.id)}>X</button>
              </div>
            ))
          }
        </div>
      </div>
    )
  }
}

export default DemoA;



// ------------------------------------------
// ------------------------------------------
// ------------------------------------------
// ------------------------------------------
// ------------------------------------------
// ------------------------------------------
// ------------------------------------------
// ------------------------------------------
// ------------------------------------------
// ------------------------------------------
// ------------------------------------------
// ------------------------------------------
// ------------------------------------------
// ------------------------------------------